<script lang="ts" setup>
import { ActivityAxios } from "@/api";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import moment from "moment";
import { Empty, List, showLoadingToast, closeToast } from "vant";
import NoData from "@/image/new_img/activity/no_data.svg";
import { UserStore } from "@/store";
import sortBy from "lodash";
const userStore = UserStore();
const { t } = useI18n();
//消息通知
const selectList: any = ref([
  {
    title: t("systemNotify.all"),
    list: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
    LoadType: false,
    noticeType: -1,
  }, //全部也就是包含待办事项
  {
    title: t("systemNotify.system"),
    list: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
    LoadType: false,
    noticeType: 5,
  }, //系统
  {
    title: t("systemNotify.deposit"),
    list: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
    LoadType: false,
    noticeType: 2,
  }, //存款
  {
    title: t("systemNotify.withdrawal"),
    list: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
    LoadType: false,
    noticeType: 4,
  }, //提现
  {
    title: t("systemNotify.bonus"),
    list: [],
    pageNo: 1,
    pageSize: 10,
    total: 0,
    LoadType: false,
    noticeType: 3,
  }, //奖金
]);

onMounted(() => {
  getMsgNoticeList(0);
  //getSysNoticeList();
});
////selectType：0全部 5：系统， 2：存款，3：奖金 ,4提现,
const selectType = ref(0);
const msgData = ref([] as any);
// selectList.value:0全部 1,
const selectTypeFun = index => {
  selectType.value = index;
  selectList.value[selectType.value].pageNo = 1;
  selectList.value[selectType.value].list = [];
  selectList.value[selectType.value].total = 0;
  selectList.value[selectType.value].LoadType = false;
  getMsgNoticeList(index);
};
const loading = ref(false); //加载中
const finished = ref(false); //否已加载完成，加载完成后不再触发 load 事件
//const token = JSON.parse(localStorage.getItem("userStore") as any);
//selectType：0全部 1：系统， 2：存款，3：奖金 ,4提现,
const getMsgNoticeList = sortBy.throttle(_noticeNnm => {
  if (!userStore.isLogin) {
    return;
  }
  // const noticeType = noticeNnm == 2 ? 2 : noticeNnm == 3 ? 4 : 3;
  // 用户消息通知列表
  showLoadingToast({
    message: "Loading...",
    forbidClick: true,
  });
  ActivityAxios.getMsgNoticeList({
    noticeType: selectList.value[selectType.value].noticeType,
    pageNo: selectList.value[selectType.value].pageNo,
    pageSize: selectList.value[selectType.value].pageSize,
  })
    .then(res => {
      if (res.list.length > 0) {
        res.list.map((item: any) => {
          //if (item.noticeType == 4 || item.noticeType == 2 || item.noticeType == 3)
          if (item.noticeType == 4 || item.noticeType == 2 || item.noticeType == 3) {
            item.content = JSON.parse(item.content);
          }
        });
        const data = res?.list.map((item: object) => ({ ...item, showContent: false }));
        selectList.value[selectType.value].list =
          selectList.value[selectType.value].list.concat(data);
        selectList.value[selectType.value].total = res.total;
        if (
          selectList.value[selectType.value].list.length < selectList.value[selectType.value].total
        ) {
          selectList.value[selectType.value].pageNo += 1;
        }

        msgData.value = data;
      }
      selectList.value[selectType.value].LoadType = true;
      finished.value = true;
      loading.value = false;
      closeToast();
    })
    .finally(() => {
      finished.value = true;
      loading.value = false;
      closeToast();
    });
}, 1500);

/***********0下标的全部******************** */

// 全部要放三个接口 1.系统消息通知列表 ，1.代办事项，3.是个人用户的全部和系统

const clickContent = (item: any) => {
  item.showContent = !item.showContent;
};

//下拉加载更多
const onLoad = () => {
  getMsgNoticeList(selectType.value);
};

/*******国际化************* */
//消息标题过滤国际化
//5：待办事项===系统，2：deposit存款，3：bonus奖金，4：withdrawal提现
function titleText(noticeType) {
  // t("systemNotify.system");
  if (noticeType == 5) {
    return t("systemNotify.system");
  }
  //2：存款
  if (noticeType == 2) {
    return t("systemNotify.deposit");
  }
  //奖金
  if (noticeType == 3) {
    return t("systemNotify.bonus");
  }
  //4：提现
  if (noticeType == 4) {
    return t("systemNotify.withdrawal");
  }
}
</script>
<template>
  <!-- 消息通知 -->
  <div class="frame-div">
    <div class="select-frame">
      <div class="select-content-frame df">
        <div
          v-for="(item, index) in selectList"
          :key="index"
          class="select-content df ai-center jc-center test-spacing"
          :class="{ 'dinfe-type': selectType == index }"
          @click="selectTypeFun(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="content-frame">
        <div class="interval"></div>
        <div class="list-frame">
          <div class="ListVant-frame">
            <List
              @load="onLoad"
              :loading="loading"
              :finished="finished"
              :loading-text="t('tip.loading')"
              :immediate-check="false"
              class="vant-list-frame"
            >
              <div
                v-for="(item, indexs) in selectList[selectType].list"
                :key="indexs"
                class="card-frame"
                @click="clickContent(item)"
              >
                <div class="titen-frame df ai-center">
                  <img
                    v-show="!item.showContent"
                    class="showimg"
                    src="@/image/new_img/home/user_img/sanjiao-1.png"
                  />
                  <img
                    v-show="item.showContent"
                    class="showimg"
                    :class="{ showimg2: item.showContent }"
                    src="@/image/new_img/home/user_img/sanjiao-2.png"
                  />
                  {{ selectType !== 0 ? selectList[selectType].title : titleText(item.noticeType) }}
                </div>
                <div class="time-frame df ai-center">
                  {{ item.createTime ? moment(item.createTime).format("YYYY-MM-DD HH:mm:ss") : "" }}
                </div>
                <!-- noticeType==3 奖金 -->
                <div
                  class="system-frame"
                  :class="{ 'omit-1': !item.showContent }"
                  v-show="item.noticeType === 3"
                >
                  {{
                    item.content.operType
                      ? t("systemNotify.bonusText.operType" + item.content.operType)
                      : ""
                  }}
                  {{ t("currencyType.pt") }}
                  <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                </div>
                <!-- noticeType==2 存款 -->
                <div
                  class="system-frame"
                  :class="{ 'omit-1': !item.showContent }"
                  v-show="item.noticeType === 2"
                >
                  <div v-if="item.content.operType == 1">
                    {{ t("systemNotify.depositText.operType1") }} {{ t("currencyType.pt") }}
                    <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                  </div>
                  <div v-if="item.content.operType == 2">
                    {{ t("systemNotify.depositText.operType2Text1") }} {{ t("currencyType.pt") }}
                    <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                    {{ t("systemNotify.depositText.operType2Text2") }}
                  </div>
                </div>
                <!-- noticeType==4 提现 -->
                <div
                  class="system-frame"
                  :class="{ 'omit-1': !item.showContent }"
                  v-show="item.noticeType === 4"
                >
                  <!-- 成功提交提现申请 -->
                  <div v-if="item.content.operType == 1">
                    {{ t("systemNotify.withdrawalText.operType1text1") }} {{ t("currencyType.pt") }}
                    <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                    {{ t("systemNotify.withdrawalText.operType1text2") }}
                  </div>
                  <!-- 提现失败 -->
                  <div v-if="item.content.operType == 2">
                    {{ t("systemNotify.withdrawalText.operType2text1") }} {{ t("currencyType.pt") }}
                    <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                    {{ t("systemNotify.withdrawalText.operType2text2") }}
                  </div>
                  <!-- 提现成功 -->
                  <div v-if="item.content.operType == 3">
                    {{ t("systemNotify.withdrawalText.operType3") }} {{ t("currencyType.pt") }}
                    <span class="gold-frame">{{ item.content.gold / 100 }} </span>
                  </div>
                </div>
                <!-- noticeType==1系统通知 -->
                <div
                  class="system-frame"
                  :class="{ 'omit-1': !item.showContent }"
                  v-show="item.noticeType === 5"
                >
                  {{ item.content }}
                </div>
              </div>
              <div class="noMore-frame">
                <span
                  v-if="
                    selectList[selectType].list.length < selectList[selectType].total &&
                    selectList[selectType].LoadType
                  "
                  @click="onLoad"
                  >{{ t("tip.loadMore") }}</span
                >
                <span
                  v-if="
                    selectList[selectType].list.length === selectList[selectType].total &&
                    selectList[selectType].LoadType &&
                    selectList[selectType].list.length > 0
                  "
                  >{{ t("systemNotify.noMore") }}</span
                >
              </div>
              <Empty
                v-if="selectList[selectType].list.length === 0 && selectList[selectType].LoadType"
                image-size="200"
                :image="NoData"
                :description="t('gameLog.noRecordYet')"
              />
            </List>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.frame-div {
  transform: scale(1);
  width: 100%;
  height: 99%;
  overflow-y: hidden;
}
.content-frame {
  width: calc(100% - 60px);
  height: 99%;
  margin-left: 30px;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.select-frame {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 99%;
  //padding-top: 20px;
  background-color: #1b0a24 !important;
  overflow-y: hidden;
  .select-content {
    flex: 1;
    height: 55px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .dinfe-type {
    color: #ab3fe7;
    border-bottom: 1px solid #ab3fe7;
  }
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
}

.interval {
  width: 100%;
  height: 40px;
}

.list-frame::-webkit-scrollbar {
  display: none;
}

.list-frame {
  width: 100%;
  height: calc(100% - 100px);

  background-color: rgb(27, 10, 36);

  .card-frame {
    width: 100%;
    min-height: 174px;
    height: auto;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.04) 100%
    );
    border-radius: 30px;
    margin-bottom: 20px;
  }

  .titen-frame {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.65);
    padding-top: 30px;
    margin-left: 25px;
  }
}

.showimg {
  width: 23px;
  height: 23px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 4px;
  margin-right: 10px;
}

.time-frame {
  font-size: 24px;
  height: 36px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 10px;
  margin-left: 25px;
}

.system-frame {
  width: calc(100% - 50px);
  height: auto;
  font-size: 25px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 40px;
  padding-bottom: 30px;
  margin-top: 4px;
  margin-left: 25px;
}

.showimg2 {
  background: #ab3fe7;
}

.omit-1 {
  height: 38px;
}

.noMore-frame {
  font-size: 24px;
  height: 77px;
  line-height: 77px;
  text-align: center;
  font-size: 24px;
  color: #969799;
  margin-bottom: 40px;
}

.select-content-frame {
  width: calc(100% - 50px);
  margin-left: 30px;
}
.ListVant-frame {
  width: 100%;
  height: 99%;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
}
.gold-frame {
  color: #ffdd80;
}
// .vant-list-frame {
//   width: 100%;
//   height: 100%;
// }
</style>
